<!DOCTYPE html>
<!--suppress ALL-->
<html xmlns:th="http://www.thymeleaf.org">
<div th:replace="~{/fragment/common-fragment :: head(电影详情)}"></div>

<body>
<div class="wrapper">
    <!-- Header section -->
    <div th:replace="~{/fragment/common-fragment :: header}"></div>

    <!-- Main content -->
    <section class="container">
        <div class="col-sm-12">
            <div class="movie">
                <h2 th:text="${movie.name}" class="page-heading">The Hobbit: An Unexpected Journey</h2>

                <div class="movie__info">
                    <div class="col-sm-4 col-md-3 movie-mobile">
                        <div class="movie__images">
                            <span class="movie__rating">5.0</span>
                            <img alt="" th:src="${movie.poster}"/>
                        </div>
                        <div class="movie__rate">
                            Your vote:
                            <div id="score" class="score"></div>
                        </div>
                    </div>

                    <div class="col-sm-8 col-md-9">
                        <p th:text="${movie.duration}+' min'" class="movie__time">169 min</p>

                        <p class="movie__option">
                            <strong>国家: </strong><a th:text="${movie.country}" th:href="'/byCountry/'+${movie.country}">New
                            Zeland</a>
                        </p>
                        <p class="movie__option">
                            <strong>年份: </strong><a th:text="${#dates.format(movie.releaseDate,'yyyy')}"
                                                    href="#">2012</a>
                        </p>
                        <p class="movie__option">
                            <strong>类别: </strong><a th:each="cate:${movie.categories}" th:text="${cate.name}+' '"
                                                    th:href="'/byCategory/'+${cate.name}">Adventure</a>
                        </p>
                        <p class="movie__option">
                            <strong>上映日期: </strong><span th:text="${#dates.format(movie.releaseDate,'yyyy-MM-dd')}">December 12, 2012</span>
                        </p>
                        <p class="movie__option">
                            <strong>导演: </strong><a th:text="${movie.directors}"
                                                    th:href="'/byDirector/'+${movie.directors}">Peter Jackson</a>
                        </p>
                        <p class="movie__option">
                            <strong>演员: </strong>
                            <a th:href="'/byActors/'+${movie.actors}" th:text="${movie.actors}">Martin Freeman</a>
                        <p><a href="#" th:text="'评论: '+${reviews.size()}" class="comment-link">评论: 15</a></p>
                        <div class="movie__btns movie__btns--full">
                            <a th:href="@{/book1(movieId=${movie.id})}" class="btn btn-md btn--warning">预订此电影</a>
                            <a th:if="${session.login!=null}" th:attr="data-movieId=${movie.id}"
                               class="watchlist addWatchlist">添加到播放列表</a>
                        </div>
                    </div>
                </div>

                <div class="clearfix"></div>

                <h2 class="page-heading">剧情</h2>

                <p th:text="${movie.plot}" class="movie__describe">
                    剧情简介，这部电影讲述了。。。。
                </p>
            </div>

            <h2 class="page-heading">场次</h2>
            <div class="choose-container">

                <div class="clearfix"></div>

                <div class="time-select">
                    <div class="time-select__group">
                        <div class="col-sm-4">
                            <p class="time-select__place">所有场次</p>
                        </div>
                        <ul class="col-sm-8 items-wrap">
                            <li th:each="scene:${scenes}" th:text="${scene.showtime}" class="time-select__item"
                                data-time="09:00">09:00
                            </li>
                        </ul>
                    </div>

                </div>

                <h2 th:text="'评论 ('+${reviews.size()}+')'" class="page-heading">评论 (15)</h2>

                <div class="comment-wrapper">
                    <form id="comment-form" class="comment-form">
                        <input type="text" hidden name="movieId" th:value="${movie.id}">
                <textarea
                        class="comment-form__text"
                        name="content"
                        placeholder="发表您的评论吧"
                ></textarea>
                        <button
                                type="button"
                                class="btn btn-md btn--danger comment-form__btn"
                        >
                            发表评论
                        </button>
                    </form>

                    <div class="comment-sets">
                        <!-- 评论 -->
                        <div class="comment" th:each="review:${reviews}">
                            <a href="#" th:text="${review.nickname}" class="comment__author">Roberta Inetti</a>
                            <p th:text="${#dates.format(review.createTime,'yyyy-MM-dd hh:MM:ss')}">today | 03:04</p>
                            <p th:text="${review.content}" class="comment__message">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut
                                vitae enim sollicitudin, euismod erat id, fringilla lacus.
                                Cras ut rutrum lectus. Etiam ante justo, volutpat at viverra
                                a, mattis in velit. Morbi molestie rhoncus enim, vitae
                                sagittis dolor tristique et.
                            </p>
                            <a href="#" class="comment__reply">Reply</a>
                        </div>
                        <!-- 评论结束 -->

                        <!-- 回复提示框的展开，在custom.js 1069行 -->
                        <!-- 评论回复 -->
                        <div class="comment comment--answer">
                            <a href="#" class="comment__author">Dmitriy Pustovalov</a>
                            <p class="comment__date">today | 10:19</p>
                            <p class="comment__message">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut
                                vitae enim sollicitudin, euismod erat id, fringilla lacus.
                                Cras ut rutrum lectus. Etiam ante justo, volutpat at viverra
                                a, mattis in velit. Morbi molestie rhoncus enim, vitae
                                sagittis dolor tristique et.
                            </p>
                            <a href="#" class="comment__reply">Reply</a>
                        </div>
                        <!-- 回复结束 -->
                    </div>
                </div>
            </div>
        </div>
    </section>

    <div class="clearfix"></div>

    <div th:replace="~{/fragment/common-fragment :: footer}"></div>
</div>

<!-- open/close -->
<div th:replace="~{/fragment/common-fragment :: pop}"></div>

<!-- JavaScript-->
<div th:replace="~{/fragment/common-fragment :: script}"></div>

<script type="text/javascript">
    $(document).ready(function () {
        init_MoviePage();
    });
</script>
</body>
</html>
